<template>
  <div>
    <el-menu
      default-active="1"
      @open="handleOpen"
      @close="handleClose"
      
    >
      <menu-item
        v-for="(item, index) in subMenus"
        :key="index"
        :datas="item"
      ></menu-item>
    </el-menu>
  </div>
</template>

<script>
import MenuItem from "./MenuItem.vue";
export default {
  name: "LeftMenu",
  components: {
    MenuItem,
  },
  data() {
    return {
      subMenus: [
        { index: "1", name: "一级菜单A", parentid: "0" },
        {
          index: "2",
          name: "一级菜单B",
          parentid: "0",
          children: [
            { index: "2-1", name: "二级菜单A", parentid: "2" },
            { index: "2-2", name: "二级菜单B", parentid: "2" },
          ],
        },
        {
          index: "3",
          name: "一级菜单C",
          parentid: "0",
          children: [
            { index: "3-1", name: "二级菜单A", parentid: "3" },
            {
              index: "3-2",
              name: "二级菜单B",
              parentid: "3",
              children: [
                { index: "3-2-1", name: "三级菜单A", parentid: "3-2" },
                {
                  index: "3-2-2",
                  name: "三级菜单B",
                  parentid: "3-2",
                  children: [
                    { index: "4-3-2-1", name: "子菜单", parentid: "3-2-2" },
                    { index: "4-3-2-2", name: "子选项", parentid: "3-2-2" },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    // 注册事件
		this.$bus.$on('updateMenu', (content)=>{
			console.log('leftMenu中接受事件==',content);
      if(content.index == '1'){
        this.subMenus=[
          { index: "4-3-2-1", name: "子菜单", parentid: "3-2-2" },
          { index: "4-3-2-2", name: "子选项", parentid: "3-2-2" },
        ]

      }else{
        this.subMenus=[
          { index: "2-1", name: "分组1", parentid: "3-2-2" },
          { index: "2-2", name: "分组2", parentid: "3-2-2" },
        ]
      }

		});
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log('菜单打开事件',key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('菜单关闭事件',key, keyPath);
    },
  
  },
};
</script>

<style>
</style>